Summary

1. routes and child routes

In the above picture, we can see some menu links 'Dashboard','Orders', 'Products' etc... in the left panel. These links are called main routes

In the picture , we can see a tab 'All products','Active Products','Under Review', 'Sold Out' etc in the right panel. These links are called child routes of the main route 'Products'

2. Create main route

1. components

We have 5 main routes. So we need to create 5 components

                      ng g c pages/dashboard
                      ng g c pages/orders 
                      ng g c pages/products
                      ng g c pages/transactions 
                      ng g c pages/settings
                      

2. import the new components in the main app routes

src/app/app.routes.ts

                      import { Routes } from '@angular/router';

                      import { DashboardComponent } from './pages/dashboard/dashboard.component';

                      import { OrdersComponent } from './pages/orders/orders.component';

                      import { ProductsComponent } from './pages/products/products.component';

                      import { TransactionsComponent } from './pages/transactions/transactions.component';

                      import { SettingsComponent } from './pages/settings/settings.component';
                     

                      export const routes: Routes = [
                          { path: '', component: DashboardComponent, },

                          { path: 'orders', component: OrdersComponent },

                          { path: 'products', component: ProductsComponent },

                          { path: 'transactions', component: TransactionsComponent },

                          { path: 'settings', component: SettingsComponent }
                      ];

                      

3. add links in the main html page

src/app/app.component.html

                      <header>
                          <section>
                            <h1>{{ title }}</h1>
                          </section>
                          <nav>
                            
                            <ul>
                              <li><a routerLink="/">Dashboard</a></li>
                              <li><a routerLink="/orders">Orders</a></li>
                              <li><a routerLink="/products">Products</a></li>
                              <li><a routerLink="/transactions">Transactions</a></li>
                              <li><a routerLink="/settings">Settings</a></li>
                            </ul>
                            
                          </nav>
                        </header>

                        <main>
                          <h4>Routes Result</h4>
                          <router-outlet></router-outlet>
                        </main>

                    

4. main component

src/app.component.ts

                    import { Component } from '@angular/core';

                    @Component({
                      selector: 'app-root',
                      templateUrl: './app.component.html',
                      styleUrls: ['./app.component.css']
                    })
                    export class AppComponent {
                      title = 'angular-routing';
                      
                    }

                    

3. Child route

1. child components

                    ng g c pages/products/allProducts --module=app
                    ng g c pages/products/activeProducts --module=app
                    ng g c pages/products/reviewProducts --module=app
                    ng g c pages/products/soldProducts --module=app
                   

2. import components

src/app/app.routes.ts

                    import { AllProductsComponent } from './pages/products/allProducts/allProducts.component';
                    import { ActiveProductsComponent } from './pages/products/activeProducts/activeProducts.component';
                    import { ReviewProductsComponent } from './pages/products/reviewProducts/reviewProducts.component';
                    import { SoldProductsComponent } from './pages/products/soldProducts/soldProducts.component';



                    export const routes: Routes = [
                          { path: '', component: DashboardComponent, },

                          { path: 'orders', component: OrdersComponent },

                          { path: 'products', component: ProductsComponent,

                                children: [
                                  { path: '', component: AllProductsComponent },
                                  { path: 'active', component: ActiveProductsComponent },
                                  { path: 'review', component: ReviewProductsComponent },
                                  { path: 'sold', component: SoldProductsComponent },
                                ],
                          
                          },

                          { path: '',

                              children: [
                                { path: 'admin-login', component: AllProductsComponent },
                                { path: 'admin-dashboard', component: ActiveProductsComponent }
                              ],

                          },

                          { path: 'transactions', component: TransactionsComponent },

                          { path: 'settings', component: SettingsComponent }
                      ];




                  

Note children routes: with and without empty path 3. add child links

products.component.html

                       <div>
                              <p>contact works!</p>
                              <ul>
                                <li><a routerLink="/products/active">All Products</a></li>
                                <li><a routerLink="/products/review">Review Products</a></li>
                                <li><a routerLink="/products/sold">Sold Products</a></li>
                              </ul>
                              <h4>Child Routes Result</h4>
                              <router-outlet></router-outlet>
                        </div>